<template>
  <div @mouseenter="mouseenter" @mouseleave="mouseleave" @touchstart="touchstart" @touchend="touchend">
    <div class="showWindow">
      <slot></slot>
    </div>
    <div class="showBot" v-if="showBot">
      <div class="showBotItem" @click="preBtn"><Icon icon="left"/></div>
      <div v-for="name in childrenLength" :key="name" :class="{showBotItem: true, active: name === selected}" @click="selectBotItem(name)">
        {{ name }}
      </div>
      <div class="showBotItem" @click="nextBtn"><Icon icon="right"/></div>
    </div>
  </div>
</template>

<script>
import Icon from '../icon'
export default {
  props: {
    selected: {
      type: Number
    },
    changeTime: {
      type: Number,
      default: 3
    },
    showBot: {
      type: Boolean,
      default: true
    }
  },
  components: { Icon },
  data () {
    return {
      childrenLength: 0
    }
  },
  mounted () {
    this.childrenLength = this.items.length
    this.updateChildren(false)
    this.run()
  },
  computed: {
    items () {
      return this.$children.filter(item => item.$options.name === 'zSlidesItem')
    },
    names () {
      return this.items.map(item => item.name)
    }
  },
  watch: {
    'selected' (newVal, oldval) {
      this.updateChildren(true)
      if (newVal === 1) {
        this.updateChildren(true)
      } else if (newVal > oldval) {
        this.updateChildren(false)
      }
    }
  },
  methods: {
    mouseenter () {
      clearInterval(this.timeId)
    },
    mouseleave () {
      if (this.timeId) clearInterval(this.timeId)
      this.run()
    },
    touchstart (e) {
      this.startX = e.changedTouches[0].clientX
    },
    touchend (e) {
      this.endX = e.changedTouches[0].clientX
      if (this.startX - this.endX > 100) {
        this.nextBtn()
      } else if (this.startX - this.endX < -100) {
        this.preBtn()
      }
    },
    preBtn () {
      let pre
      if (this.selected === 1) {
        pre = this.childrenLength
      } else {
        pre = this.selected - 1
      }
      this.$emit('update:selected', pre)
    },
    nextBtn () {
      let next
      if (this.selected === this.childrenLength) {
        next = 1
      } else {
        next = this.selected + 1
      }
      this.$emit('update:selected', next)
    },
    selectBotItem (item) {
      clearInterval(this.timeId)
      this.$nextTick(() => {
        this.$emit('update:selected', item)
        this.run()
      })
    },
    getNextSelected () {
      let nextSelected = null
      if (this.selected === this.childrenLength) {
        nextSelected = 1
      } else {
        nextSelected = this.selected + 1
      }
      this.$emit('update:selected', nextSelected)
    },
    updateChildren (reverse) {
      this.items.forEach(item => {
        item.reverse = reverse
        this.$nextTick(() => {
          item.selected = this.selected
        })
      })
    },
    run () {
      this.timeId = setInterval(() => {
        this.getNextSelected()
      }, this.changeTime * 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.showBot {
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: center;
  margin-top: 12px;
  > .showBotItem {
    background: #ddd;
    width: 20px;
    text-align: center;
    margin-right: 10px;
    border-radius: 10px;
    cursor: pointer;
    color: black;
  }
  > .active {
    background-color: black;
    color: #ffffff;
  }
}
.showWindow {
  overflow: hidden;
  position: relative;
}

</style>
